<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
<!--    <link rel="stylesheet" type="text/css" href="css/jq22-demo.css">-->
</head>
<!--<script src="js/bubbleCursor.js" type="text/javascript"></script>-->
<style>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>系统设置
            <small>菜单管理</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item><a href="/pages/main.html">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>系统设置</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText"
                    style="width: 300px">
            </el-input>
            <br><br>
            <el-tree
                    class="filter-tree"
                    :data="data"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    ref="tree"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button
                      type="text"
                      size="mini"
                      @click="() => append(data)">
                <el-button type="primary" size="mini">添加</el-button>
              </el-button>
              <el-button
                      type="text"
                      size="mini"
                      @click="() => remove(node, data)">
                <el-button size="mini" type="danger">删除</el-button>
              </el-button>
            </span>
          </span>
            </el-tree>
        </div>
    </div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->

<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var name = "";
    let id = 1000;
    var vue = new Vue({
        el: '#app',
        data: {
            filterText: '',
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.findMenu()
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            findMenu() {
                axios.get("/menu/getMenu.do").then((result) => {
                    console.log(result.data.data);
                    this.data = result.data.data
                })
            },
            append(data) {
                name = "";
                this.$prompt('请输入菜单名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    console.log(value)
                    console.log(data.id)
                    var params = {parentMenuId: data.id, name: value}
                    axios.post("/menu/addMenu.do?", params).then((result) => {
                        if (result.data.flag) {
                            name = value;
                            this.findMenu()
                            this.$message({
                                type: 'success',
                                message: '添加成功'
                            });
                        }
                    })
                }).catch(() => {
                    this.findMenu()
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
                const newChild = {id: id++, label: name, children: []};
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);
            },

            remove(node, data) {
                this.label = data.name
                this.$confirm('灵魂三问, 点错了? 真删吗? 确定吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/menu/delMenu.do?id=" + data.id).then((result) => {
                        if (result.flag) {
                            name = "";
                            this.findMenu()
                            this.$message.success
                        }
                    })
                }).catch(() => {
                    this.findMenu()
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },

        },

    })
</script>
</html>